<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery UI Class Animation Example</title>
    <style>
    	div { margin-bottom:5px; }
			label { display:block; width:100px; float:left; }
			input { border:1px solid #000000; }
			.error { border:1px solid #ff0000; background-color:#ff9999; }
			.pass { border:1px solid #00ff00; background-color:#ccffcc; }
    </style>
  </head>
  <body>
    <div>
    	<label>Name: </label>
    	<input type="text">
    </div>
    <div>
    	<label>Age: </label>
    	<input type="text">
    </div>
    <div>
    	<label>Email: </label>
    	<input type="text">
    </div>
    <button id="submit">Submit</button>
    
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
    <script type="text/javascript">
			$(function() {
				$("#submit").click(function() {
					//检验文本框是否为空
					$("input").each(function() {
						if ($(this).hasClass("error")) {
							
							//do nothing if empty or add pass class 
							($(this).val().length == 0) ? null : $(this).switchClass("error", "pass", 2000);
						} 
						else if ($(this).hasClass("pass")) {
						
							//do nothing if not empty or add error class 
							($(this).val().length != 0) ? null : $(this).switchClass("pass", "error", 2000);
						} 
						else {
						
							//add error class if empty, pass if not
							($(this).val().length == 0) ? $(this).addClass("error", 2000) : $(this).addClass("pass", 2000);
						}
					});
				});
			});
		</script>
  </body>
</html>
